Overview
This is a group project we created in our intro to responsive web class. We brainstormed ideas and came up with a fashion e-commerce website tailored for men.
Misprint is an online retail destination with a remarkable international collection from signature brands to independent designer’s clothes. The store produces in-depth editorial stories and useful lifestyle tips that provide many perspectives from a wide variety of labels in its inventory. The goal of this project is to envision an e-commerce reputation for the brand with a responsive web design concept.
Constructing Low-fidelity Wireframes
After figuring out our demographic and personas, we started working on the layout of the pages individually. I created my low-fidelity wireframes with Balsamiq to visualize how the content should be laid out across different screen sizes. I started all of my pages on mobile screen to make sure all of my content can be seen and are readable on smallest screens before I move up to larger screens.
Building High-fidelity Mockups
The final version of the website has a clean, modern, and monochromatic tone which matched the vision our team had planned for in the ideation phase. The colors and content were carefully selected to effectively resonate with Misprint's targeted consumers.
Building the Live Version and Final Thoughts
Using HTML and CSS, I created a responsive website for Misprint with 3 breakpoints to demonstrate the ability to use it on a variety of screen sizes. Overall, I had a great time learning about the importance of responsive designs in this class. The roadblocks I had from coding the website helped me learned from my mistakes, enabling me to learn more in the process.
I'm happy I could bring my vision to life with the web development skills I've gathered throughout this class. Super grateful to my team members for working collaboratively during our ideation session and came up with this project idea together.
